/* eslint-disable @typescript-eslint/no-var-requires */
// const { defineConfig } = require('@vue/cli-service');
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
const AutoImport = require('unplugin-auto-import/webpack');
const Components = require('unplugin-vue-components/webpack');
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers');
const path = require('path');

module.exports = {
  transpileDependencies: true,
  lintOnSave: false,
  devServer: {
    open: true,
    host: '0.0.0.0', // 允许外部ip访问
    port: 8085, // 端口
    client: {
      overlay: false, // 禁用错误和警告的覆盖层
    },
    // 添加热更新
    hot: true,
    // 启用 gzip 压缩
    compress: true,
  },
  css: {
    loaderOptions: {
      scss: {
        additionalData: `@use "@/assets/skin/orange/index.scss" as *;`,
      },
    },
  },
  configureWebpack: config => {
    // 根据环境配置 source map
    config.devtool = process.env.NODE_ENV === 'development' ? 'eval-cheap-module-source-map' : false;
    
    // 优化模块解析
    config.resolve = {
      ...config.resolve,
      symlinks: false,
      // 添加常用文件扩展名，提高解析速度
      extensions: ['.js', '.vue', '.json', '.ts', '.tsx'],
    };

    // 配置缓存
    config.cache = {
      type: 'filesystem',
      buildDependencies: {
        config: [__filename],
      },
    };

    // 优化 webpack 性能
    config.optimization = {
      ...config.optimization,
      moduleIds: 'deterministic',
      splitChunks: {
        chunks: 'all',
        cacheGroups: {
          vendors: {
            name: 'chunk-vendors',
            test: /[\\/]node_modules[\\/]/,
            priority: -10,
            chunks: 'initial',
          },
          common: {
            name: 'chunk-common',
            minChunks: 2,
            priority: -20,
            chunks: 'initial',
            reuseExistingChunk: true,
          },
        },
      },
    };

    config.plugins.push(new NodePolyfillPlugin());

    config.plugins.push(
      AutoImport({
        imports: ['vue', 'vue-router', 'pinia'],
        resolvers: [ElementPlusResolver()],
        dts: path.resolve(__dirname, 'auto-imports.d.ts'),
        cache: true,
      }),
    );

    config.plugins.push(
      Components({
        resolvers: [ElementPlusResolver({ importStyle: 'sass' })],
        directoryAsNamespace: true,
        dts: path.resolve(__dirname, 'components.d.ts'),
        cache: true,
      }),
    );
  },
};
